<script setup>
import { ref, onMounted } from 'vue'
import { listIndicatorResults } from '../../api/common'
import { doctorCreateIndicatorResult, doctorUpdateIndicatorAbnormal } from '../../api/doctor'
import { ElMessage } from 'element-plus'

const list = ref([])
const total = ref(0)
const query = ref({ sampleId: '', indicatorId: '', abnormalFlag: '', page: 1, size: 10 })
const loading = ref(false)

const addDialog = ref(false)
const addForm = ref({ sampleId: '', indicatorId: '', resultValue: '', abnormalFlag: '', doctorComment: '' })

const abnormalDialog = ref(false)
const abnormalForm = ref({ resultId: null, abnormal: null, comment: '' })

const fetchList = async () => {
  loading.value = true
  try {
    const abnormalParam = query.value.abnormalFlag === '' ? undefined : query.value.abnormalFlag
    const data = await listIndicatorResults({ sampleId: query.value.sampleId || undefined, indicatorId: query.value.indicatorId || undefined, abnormalFlag: abnormalParam, page: query.value.page, size: query.value.size })
    list.value = data.list || []
    total.value = data.total || 0
  } finally { loading.value = false }
}

const openAdd = () => { addDialog.value = true }
const submitAdd = async () => {
  loading.value = true
  try {
    const payload = {
      sampleId: addForm.value.sampleId,
      indicatorId: addForm.value.indicatorId,
      resultValue: addForm.value.resultValue,
      abnormalFlag: addForm.value.abnormalFlag === '' ? undefined : addForm.value.abnormalFlag,
      doctorComment: addForm.value.doctorComment || undefined,
    }
    await doctorCreateIndicatorResult(payload)
    ElMessage.success('录入成功')
    addDialog.value = false
    addForm.value = { sampleId: '', indicatorId: '', resultValue: '', abnormalFlag: '', doctorComment: '' }
    fetchList()
  } finally { loading.value = false }
}

const openAbnormal = (row) => {
  abnormalForm.value.resultId = row.resultId
  abnormalForm.value.abnormal = !!row.abnormalFlag
  abnormalForm.value.comment = row.doctorComment || ''
  abnormalDialog.value = true
}
const submitAbnormal = async () => {
  loading.value = true
  try {
    await doctorUpdateIndicatorAbnormal(abnormalForm.value.resultId, { abnormal: abnormalForm.value.abnormal, comment: abnormalForm.value.comment || undefined })
    ElMessage.success('异常标注更新成功')
    abnormalDialog.value = false
    fetchList()
  } finally { loading.value = false }
}

onMounted(fetchList)
</script>

<template>
  <el-card>
    <div class="header">
      <h3>指标结果录入与管理</h3>
      <el-button type="primary" @click="openAdd">录入指标结果</el-button>
    </div>
    <el-form :inline="true" :model="query" class="mb-2">
      <el-form-item label="标本ID"><el-input v-model="query.sampleId" /></el-form-item>
      <el-form-item label="指标ID"><el-input v-model="query.indicatorId" /></el-form-item>
      <el-form-item label="异常">
        <el-select v-model="query.abnormalFlag" style="width:150px" placeholder="全部">
          <el-option label="全部" :value="''" />
          <el-option label="正常" :value="false" />
          <el-option label="异常" :value="true" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query.page=1;fetchList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" v-loading="loading" style="width:100%">
      <el-table-column prop="resultId" label="结果ID" width="90" />
      <el-table-column prop="sampleId" label="标本ID" />
      <el-table-column prop="indicatorId" label="指标ID" />
      <el-table-column prop="resultValue" label="结果值" />
      <el-table-column prop="abnormalFlag" label="异常">
        <template #default="{ row }">
          <el-tag :type="row.abnormalFlag ? 'danger' : 'success'">
            {{ row.abnormalFlag ? '异常' : '正常' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="doctorComment" label="医生备注" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button size="small" @click="openAbnormal(row)">异常标注</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-2">
      <el-pagination background layout="total, prev, pager, next" :total="total" :page-size="query.size" :current-page="query.page" @current-change="(p)=>{query.page=p;fetchList()}" />
    </div>
  </el-card>

  <el-dialog v-model="addDialog" title="录入指标结果" width="480px">
    <el-form :model="addForm" label-width="120px">
      <el-form-item label="标本ID"><el-input v-model="addForm.sampleId" /></el-form-item>
      <el-form-item label="指标ID"><el-input v-model="addForm.indicatorId" /></el-form-item>
      <el-form-item label="结果值"><el-input v-model="addForm.resultValue" /></el-form-item>
      <el-form-item label="异常"><el-select v-model="addForm.abnormalFlag"><el-option label="正常" :value="false" /><el-option label="异常" :value="true" /></el-select></el-form-item>
      <el-form-item label="医生备注"><el-input v-model="addForm.doctorComment" /></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addDialog=false">取消</el-button>
      <el-button type="primary" :loading="loading" @click="submitAdd">提交</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="abnormalDialog" title="更新异常标注" width="420px">
    <el-form :model="abnormalForm" label-width="120px">
      <el-form-item label="异常"><el-select v-model="abnormalForm.abnormal"><el-option label="正常" :value="false" /><el-option label="异常" :value="true" /></el-select></el-form-item>
      <el-form-item label="备注"><el-input v-model="abnormalForm.comment" /></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="abnormalDialog=false">取消</el-button>
      <el-button type="primary" :loading="loading" @click="submitAbnormal">提交</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.header{ display:flex; justify-content:space-between; align-items:center; }
.mb-2{ margin-bottom:12px; }
.mt-2{ margin-top:12px; }
</style>